<script setup>
import { useRouter } from 'vue-router'

const router = useRouter()

const selectItem = (index) => {
    router.push(index)
}
</script>

<template>
    <el-container id="top">
        <!-- ~@ 表示相对项目的src目录-->
        <img style="width:25px;height:25px;margin:auto;margin-right:0;" src="../assets/vue.svg"/>

        <div style="margin:auto;margin-left:10px;color:#ffffff;font-size:17px">
            离娄部署地图
        </div>
    </el-container>
    <el-menu
        :default-active="$route.path"
        style="height:100%;"
        background-color="#13233A"
        text-color="#fff"
        active-text-color="#ffd04b"
        @select="selectItem">

        <el-menu-item index="/home/agentmap/region">探测机部署-区域维度</el-menu-item>
        <el-menu-item index="/home/agentmap/az">探测机部署-机房维度</el-menu-item>
        <el-menu-item index="/home/agentmap/serv">探测机部署-产品维度</el-menu-item>
        <el-menu-item index="/home/kafkamap">Kafka部署</el-menu-item>
        <el-menu-item index="/home/agentservinfo">探测机服务器信息</el-menu-item>
    </el-menu>
</template>

<style scoped>
#top {
    /*background-color:#545c64;*/
    background-color:#13233A;
    margin-right:1px;
    text-align: center;
    height: 60px;
}
</style>